import React from "react"
import { Card, Form, Button, Image, Modal } from 'antd-mobile'
import './index.css'

interface IProps {
    props: any
}

const UserOrderCard: React.FC<IProps> = ({ props }) => {
    const { merchantName, goodsInfoList, serialNum } = props
    const handleClick = () => {
        Modal.show({
            content: `取餐号 ${serialNum}`,
            closeOnMaskClick: true,
            showCloseButton: true,
        })
    }
    return (
        <Card
            title={
                <div style={{ fontWeight: 'normal', fontSize: 18 }}>
                    {merchantName}
                </div>
            }
            style={{ borderRadius: 0 }}
        >
            <div className="user-order-card-content">
                {
                    goodsInfoList?.map((item: any) => {
                        return (
                            <>
                                <div className="user-order-card-item">
                                    <div>
                                        <Image src={item.image}></Image>
                                    </div>
                                    <div style={{paddingLeft: 10, fontSize: 16}}>{item.goodsName}</div>
                                    <div style={{ paddingLeft: 10, fontSize: 16 }}>￥{item.price}  ×{item.num}</div>
                                </div>
                            </>
                        )
                    })
                }
            </div>
            <div className="footer" onClick={handleClick}>
                查看套餐/号码
            </div>
        </Card>
    )
}

export default UserOrderCard